"use strict";
let count = 1;
let data = [{ id: count, title: "test1", text: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt libero numquam, ipsum hic consequatur similique vel. Quae consequuntur hic culpa sit asperiores reiciendis? Officiis repellat, nisi doloribus vel cumque optio.", edit:false }];
const title = document.querySelector("#title");
const textAreaContent = document.querySelector("#textAreaContent");
const addButton = document.querySelector("#addButton");


addButton.addEventListener("click", () => {
  if (title.value !== "" && textAreaContent.value !== "") {
    data.push({
      id: (count += 1),
      title: title.value,
      text: textAreaContent.value,
      edit:false
    });
    title.value = "";
    textAreaContent.value = "";
    renderNotes('once');
    render(data);
  } else {
    render("Ошибка");
  }
});
function render(value) {
  console.log(value);
}
function HtmlCard(post){
  const output = document.querySelector(".wrapper__output");
  return output.innerHTML += `
    <div class="wrapper__card" id="${post.id}" >
        <div class="card__titleConteiner">
            <div class="wrapper__title">${post.title}</div>
            <div class="output__buttons">
                <div class="wrapper__conteiner" >
                    <button class="editButton" id="${post.id}" >edit</button>
                </div>
                <div class="wrapper__conteiner" >
                    <button class="deleteButton" id="${post.id}">del</button>
                </div>
            </div>
        </div>
        <div class="card__textConteiner">
            <div class="wrapper__text">${post.text}</div>
        </div>
    </div>
  `;
}
function renderNotes(checkpointer) {
  if (checkpointer === 'all'){
    for (const post of data) {
      HtmlCard(post);
    }
  }
  else if( checkpointer === 'once'){
    HtmlCard(lastElement());
  }
  const deleteButtons = document.querySelectorAll(".deleteButton");
  const editButtons = document.querySelectorAll(".editButton");
  deleteButtons.forEach((deleteButton) => {
    deleteButton.addEventListener("click", () => {
      if (deleteButton.id > 0) {
        data = data.filter((post) => post.id !== Number(deleteButton.id));
        const card = document.querySelector(".wrapper__card");
        card.remove();
        render(data);
      } else {
        render("Ошибка");
      }
    });
  });
function edit1() {
  data.forEach((arrElement) => {
    arrElement.edit = true;
    if (arrElement.edit === true) {
        title.value = arrElement.title;
        textAreaContent.value = arrElement.text;
    }
  });
}
function edit2(id) {
  data.forEach((arrElement) => {
    arrElement.edit = false;
    if (arrElement.edit === false) {
      if (arrElement.id === id) {
        const titleCard = document.querySelector('.wrapper__title');
        const textCard = document.querySelector('.wrapper__text');
        titleCard.textContent = title.value;
        textCard.textContent = textAreaContent.value;
        arrElement.title = title.value;
        arrElement.text = textAreaContent.value;
      }
    }
  });
}
  editButtons.forEach((editButton) => { 
    editButton.addEventListener("click", () => {
      data.forEach((arrElement) => {
        if(arrElement.edit === false) {
          edit1();
          editButton.textContent = "done";
        }
        else{
          edit2(editButton.id);
          editButton.textContent = "edit";
          title.value = "";
          textAreaContent.value = "";
        }
      });
    render(data);
    });
  });
}
function lastElement(){
  return data[data.length-1];
}
renderNotes('all');
